<style scoped>
    li {
        list-style: none;
    }

    .dept {
        padding: 15px 10px;
        border: 1px #cccccc solid;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        display: inline-block;
        min-width: 100px;
        position: relative;
    }

    li {
        display: inline-block;
        float: left;
        /*overflow: hidden;*/
    }

    .item {
        margin-bottom: 50px;
        text-align: center;
        padding: 0 6px;
    }

    .topVLine {
        height: 25px;
        width: 1px;
        background: #ddd;
        position: absolute;
        top: -26px;
        left: 50%;
    }

    .bottomVLine {
        height: 25px;
        width: 1px;
        background: #ddd;
        position: absolute;
        bottom: -26px;
        left: 50%;
    }

    .bottomHLine {
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -26px;
    }

    .operationBtn {
        position: absolute;
        width: 20px;
        height: 50%;
        cursor: pointer;
        background: #eeeeee;
        border: 1px #ccc solid;
        opacity: 0;
        color: #ccc;
        border-radius: 9px;
    }

    .operationBtn:hover {
        background: #ccc;
        color: #888;
    }
    .operationBtn i {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .remove {
        top: 0;
        right: 0;
        border-bottom-width: 1;
        border-right-width: 0;
        border-top-width: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .add {
        bottom: 0;
        right: 0;
        border-bottom-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 0;
    }
    .add-or-remove > div:first-child:last-child {
        height: 100%;
        border-top-right-radius: 9px;
        border-bottom-right-radius: 9px;
        border-bottom-width: 0;
    }
    .edit {
        left: 0;
        top: 0;
        height: 100%;
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .dept:hover .operationBtn {
        opacity: 1;
    }
    .root {
        overflow: hidden;
    }
</style>

<template>
        <li :class="{root:!notRoot}">
            <div v-if="!model" class="item" @click="onAddClick">
                <a class="dept">
                    <i class="iconfont icon-add"></i>
                    创建顶层部门
                </a>
            </div>
            <div v-if="model">
                <div class="item">
                    <div class="dept" ref="dept">
                        <div class="topVLine"></div>
                        <div v-if="hasChild" class="bottomVLine"></div>
                        <div v-if="hasChild" class="bottomHLine" :style="bottomHLine"></div>
                        <span><i class="iconfont icon-bumen"/> {{model[nameField]}}</span>
                        <div class="add-or-remove">
                            <div v-if="notRoot && editable && remove" class="anim operationBtn remove" @click="onRemoveClick"><i class="iconfont icon-close"></i> </div>
                            <div v-if="editable && add" class="anim operationBtn add" @click="onAddClick"><i class="iconfont icon-add"></i></div>
                        </div>
                        <div v-if="editable && edit" class="anim operationBtn edit" @click="onEditClick"><i class="iconfont icon-edit"></i></div>
                    </div>
                </div>
            <ul v-show="open" v-if='hasChild'>
                <Department :not-root="true" :data-index="index" :childrenField="childrenField" :nameField="nameField" @first="onFirstCenter" @end="onEndCenter"
                                 :editable="editable" :add="add" :remove="remove" :edit="edit"
                                 @removeChild="onRemoveChild"
                                 @onWidthChange="onWidthChange" v-for='(cs,index) in model[childrenField]' :model='cs'
                                 :data-first="index == 0"
                                 :data-end="index == (model[childrenField].length - 1)"></Department>
            </ul>
            </div>
        </li>
</template>

<script>
    export default {
        name: "Department",
        data() {
            return {
                open: true,
                bottomHLine: {
                    left: 0,
                    right: 0
                },
                childCenter: {
                    first: 0,
                    end: 0
                }
            }
        },
        computed: {
            hasChild: function () {
                return this.model[this.childrenField] && this.model[this.childrenField].length
            }
        },
        // props: ['model', 'add', 'remove', 'editable'],
        props: {
            'model': '', 'add': '', 'remove': '', 'editable': '', 'edit':'', 'notRoot': false,
            nameField: {type: String, default: 'name'},
            childrenField: {type: String, default: 'children'}
        },
        methods: {
            onFirstCenter(value) {
                this.childCenter.first = value;
            },
            onEndCenter(value) {
                this.childCenter.end = value;
            },
            onWidthChange() {
                if (!this.model) {
                    return;
                }
                var item = this.$el;
                if (item && item.dataset && item.dataset.first) {
                    this.$emit('first', parseInt(item.clientWidth / 2));
                }
                if (item && item.dataset && item.dataset.end) {
                    this.$emit('end', parseInt(item.clientWidth / 2));
                }
                var deptBoxCenter = this.$refs.dept.clientWidth / 2;
                this.bottomHLine.left = (this.childCenter.first - this.$el.clientWidth / 2 + deptBoxCenter) + 'px';
                if (this.model[this.childrenField] && this.model[this.childrenField].length == 1) {
                    this.bottomHLine.right = this.bottomHLine.left;
                } else {
                    this.bottomHLine.right = (this.childCenter.end - this.$el.clientWidth / 2 + deptBoxCenter - 1) + 'px';
                }
                this.$emit('onWidthChange');
            },
            onRemoveClick() {
                this.$emit('removeChild', this.$el.dataset.index);
            },
            onRemoveChild(index) {
                var model = this.model[this.childrenField][index];
                this.n9.confirm('删除', '确定要删除“' + model[this.nameField] + "”", ()=>{
                    if (this.remove) {
                        if (this.remove(model, ()=>{
                                this.model[this.childrenField].remove(index);
                            })) {
                            this.model[this.childrenField].remove(index);
                        }
                    }
                }, '删除');
            },
            onEditClick() {
                if (!this.edit) {
                    return;
                }
                this.edit(this.model);
            },
            onAddClick() {
                if (this.add) {
                    if (!this.model) {
                        this.add();
                        return;
                    }
                    var node = this.add(this.model, (node)=>{
                        if (this.model[this.childrenField]) {
                            this.model[this.childrenField].push(node);
                        } else {
                            this.$set(this.model, this.childrenField, [node]);
                        }
                    });
                    if (node) {
                        if (this.model[this.childrenField]) {
                            this.model[this.childrenField].push(node);
                        } else {
                            this.$set(this.model, this.childrenField, [node]);
                        }
                    }

                }
            }
        },
        mounted() {
            this.onWidthChange();
        },
        updated() {
            this.onWidthChange();
        }
    }
</script>

<style>

    @font-face {font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_947462_znjbe3rzlt8.eot?t=1543979178744'); /* IE9*/
        src: url('//at.alicdn.com/t/font_947462_znjbe3rzlt8.eot?t=1543979178744#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
        url('//at.alicdn.com/t/font_947462_znjbe3rzlt8.ttf?t=1543979178744') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/font_947462_znjbe3rzlt8.svg?t=1543979178744#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-edit:before { content: "\e658"; }

    .icon-user:before { content: "\e67f"; }

    .icon-close:before { content: "\e612"; }

    .icon-add:before { content: "\e7e3"; }

    .icon-bumen:before { content: "\e62b"; }



</style>